<template>
    <div class="admin">
        <div class="tanxin button">
            <p>筛选搜索</p>
            <div>
                <el-button @click="congzhi">重置</el-button>
                <el-button @click="sousuo">查询搜索</el-button>
            </div>
        </div>
        <div class="input">
            <div class="input_div">
                <el-form-item label="活动名称">
                    <el-input v-model="keyword" placeholder="活动名称" class="el-input" type="text"></el-input>
                </el-form-item>
            </div>
        </div>

    </div>
    <div class="tanxin tianjia">
        <span>
            数据列表
        </span>
        <div>
            <el-button @click="onflashSession">秒杀时间段列表</el-button>
            <el-button @click="openFlash">添加活动</el-button>
        </div>
    </div>
    <div class="table" :key="Keyval">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号" prop="id" width="120" />
            <el-table-column property="title" label="活动标题" width="120" />
            <el-table-column property="address" label="活动状态">
                <template #default="scope">
                    {{ dayjs(scope.row.endDate).format('YYYY') > (nian + '') ? "活动未结束" : '活动已结束' }}
                </template>
            </el-table-column>
            <el-table-column label="开始时间">
                <template #default="scope">
                    {{ scope.row.startDate ? dayjs(scope.row.startDate).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column label="结束时间">
                <template #default="scope">
                    {{ scope.row.endDate ? dayjs(scope.row.endDate).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column label="上线/下线">
                <template #default="scope">
                    <el-switch @change="onchange(scope.row.id, scope.row.status)"
                        :value="scope.row.status == 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template #default="scope">
                    <div class="tanxin" style="color: skyblue;">
                        <a @click="goshezhe(scope.row.id)"> 设置商品</a>
                        <a
                            @click="gobianji(scope.row.id, scope.row.title, scope.row.startDate, scope.row.endDate, scope.row.status)">
                            编辑</a>
                        <a @click="deteldata(scope.row.id)"> 删除</a>
                    </div>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog @closed="quxiaoann" v-model="dialogVisible" title="添加活动" width="30%">
        <div style="margin: 0 auto;width: 80%;">
            <el-form-item label="活动标题">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker format="YYYY/MM/DD" value-format="YYYY-MM-DDTHH:mm:ss.SSS" v-model="form.startDate"
                    type="date" placeholder="请选择时间" />
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker format="YYYY/MM/DD" value-format="YYYY-MM-DDTHH:mm:ss.SSS" v-model="form.endDate"
                    type="date" placeholder="请选择时间" />
            </el-form-item>

            <el-form-item label="上线/下线">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">上线</el-radio>
                    <el-radio :label="0">下线</el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="quxiaoann">取消</el-button>
                <el-button type="primary" @click="bianjiqueren">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible2" title="提示" width="30%" @closed="quxiaoann">
        <span>是否要确认?</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="quxiaoann">取消</el-button>
                <el-button type="primary" @click="querenann">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElTable, ElMessage } from 'element-plus'
import * as api from '../../request/api'
import useTabel from '../../hooks/useGoods'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
let router = useRouter()
let date = new Date()
// 年 
let nian = date.getFullYear()
// 1 为删除， 2 编辑  3为 添加
let shangchuhequren = ref()
let keyword = ref('')

// 封装请求和分页
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTabel(api.yxadmin.getcouponList,
    {
        keyword
    })
// 快关 上下线控制
let Keyval = ref(1)
let onchange = async (id: number, status: number) => {
    await api.yxadmin.updateStatus({ id, status: ((status - 1) * -1) })
    getTableData()
    Keyval.value++
    ElMessage({
        type: 'success',
        message: '操作成功',
    })
}
// 编辑
const dialogVisible = ref(false)
// 确认
const dialogVisible2 = ref(false)

// 设置按钮
let goshezhe = (id: number) => {
    router.push(`/sms/selectSession?flashPromotionId=${id}`)
    // 
}
let form = ref({
    title: '',
    startDate: '',
    status: 0,
    endDate: ''

})
let idd = ref()
// 编辑按钮
let gobianji = (id: number, title: string, startDate: number, endDate: number, status: number) => {
    form.value.title = title
    form.value.startDate = startDate + ''
    form.value.endDate = endDate + ''
    form.value.status = status
    idd.value = id
    dialogVisible.value = true
    shangchuhequren.value = 2
}
// 编辑打开确认按钮
let bianjiqueren = () => {
    dialogVisible2.value = true
}
// 确认按钮，发请求的地方
let querenann = async () => {
    if (shangchuhequren.value == 1) {
        await api.yxadmin.flashDelete(idd.value)

    } else if (shangchuhequren.value == 2) {
        form.value.status = ((form.value.status - 1) * -1)
        await api.yxadmin.flashUpdate({ id: idd.value, ...form.value })

    } else {
        // console.log(123);
        await api.yxadmin.CFlashCreate(form.value)
    }
    getTableData()
    form.value = {
        title: '',
        startDate: '',
        status: 0,
        endDate: ''
    }
    dialogVisible2.value = false
    dialogVisible.value = false
    Keyval.value++
    ElMessage({
        type: 'success',
        message: '操作成功',
    })

}
// 删除按钮
let deteldata = async (id: number) => {
    idd.value = id
    shangchuhequren.value = 1
    dialogVisible2.value = true

}
let onflashSession = () => {
    router.push('/sms/flashSession')
}
// 添加活动
let openFlash = () => {
    form.value = {
        title: '',
        startDate: '',
        status: 0,
        endDate: ''
    }
    shangchuhequren.value = 3
    dialogVisible.value = true
}
// 取消按钮
let quxiaoann = () => {
    dialogVisible2.value = false
    dialogVisible.value = false
}

let sousuo = () => {
    getTableData()
}
// 重置按钮
let congzhi = () => {
    keyword.value = ''

    getTableData()
}
</script>

<style scoped lang="scss">
.admin {
    margin: 20px;
    padding: 20px;
    padding-bottom: 30px;
    border: 1px solid #eee;
    border-radius: 5px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #eee;
    padding: 20px;
    box-sizing: border-box;

    .button {
        display: flex;
        align-items: center;
    }

    .input {
        margin-top: 20px;
        margin-left: 30px;
        font-size: 14px;
        align-items: center;
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;


    }
}

.tianjia {
    margin: 20px;
    padding: 20px;
    height: 60px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #eee;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
}

.table {
    margin: 20px;
    border: 1px solid #eee;
}
</style>